<!DOCTYPE html > 
<html style="font-size:0px">
<head>  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <title>3栏布局</title>
  <script type="text/javascript">
        (function (doc, win) {
          var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              var ft=320/10.8 * (clientWidth / 320);
              docEl.style.fontSize = (ft>65?65:ft) + 'px';
            };
          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
<style>
*{
  margin: 0;
  padding: 0;
}
  #index{
    font-size: .3rem;
    background: #f1f1f1;
    line-height: 1.8;
  }
  p{
  	padding: 20px;
  }
  li{
    text-align: center;
    list-style: none;
    border: 1px solid #FF5722;
  }
  .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
  .clearfix{*+height:1%;}
  .hljs{
    padding: 0;
    padding-left: 10px;
    padding-right: 10px;
  }
  .content{
    padding: .2rem;
    padding-right: 0;
  }
  #col1,#col2,#col3{
    width: 3.31rem;
    height: 5rem;
    background: #A2FCA2;
    float: left;
    margin-right: .2rem;
    text-align: center;
    line-height: 5rem;
  }
  .flex-con{
    margin-top: .2rem;
  }
  .flex-con ul{
    width: 10.8rem;    
    display: flex;
     /* for uc */
    display: -webkit-box;
  }
  .flex-con li{
    -webkit-flex: 1;          
    flex: 1;         
    /* for uc */
    -webkit-box-flex: 1;      
    -moz-box-flex: 1;         
    -ms-flex: 1;   

    margin-left: .1rem;
    margin-right: .1rem;
  }
</style>
</head>
<body id="index">
  <p>常规3栏布局</p>
 <div class="content clearfix">
  <div id="col1">331X500</div>
  <div id="col2">331X500</div>
  <div id="col3">331X500</div>
 </div>
 <p>平分flex布局</p>
 <div class="flex-con ">
   <ul>
     <li>item1</li>
     <li>item2</li>
     <li>item3</li>
   </ul>
 </div>
 <div class="flex-con">
   <ul>
     <li>item1</li>
     <li>item2</li>
     <li>item3</li>
     <li>item4</li>
   </ul>
 </div>
</body>
</html>